<template>
  <div class="playPage">
    <!-- 背景 -->
    <img :src="playingList.al.picUrl" alt="" class="backPic" />
    <div class="top">
      <!-- 歌曲名 -->

      <svg class="icon" aria-hidden="true" @click="backhome">
        <use xlink:href="#icon-fanhui"></use>
      </svg>

      <div class="renderinfo">
        <p>{{ playingList.name }}</p>
        <span v-for="(item, index) in playingList.ar" :key="index">
          {{ item.name }}
        </span>
      </div>

      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-changge"></use>
      </svg>
    </div>

    <div class="content" v-if="!showLyc">
      <!-- cd、磁针和歌词 -->

      <!-- 添加动态class,根据播放按钮的状态控制指针 -->
      <img
        src="../../assets/needle-ab.png"
        alt=""
        class="needle_pic"
        :class="{ needle_pic_active: flag }"
      />
      <img src="../../assets/cd.png" alt="" class="cd_pic" />

      <!-- 添加动态class，根据播放按钮的状态控制动画,cartoonPic_pic_active是在flag为true的时候添加 -->
      <img
        :src="playingList.al.picUrl"
        alt=""
        class="cartoonPic"
        :class="{ cartoonPic_pic_active: flag, cartoonPic_pic_paused: !flag }"
        @click="showLyc = true"
      />
    </div>

    <!-- 展示歌词 -->
    <div class="songLyric" ref="showLycBox" v-else @click="showLyc = false">
      <p
        v-for="(item, index) in lyricArr"
        :key="index"
        :class="{
          active: currentTime > item.lyricTime && currentTime < item.nextTime,
        }"
      >
        {{ item.lrc }}
      </p>
    </div>

    <div class="footer">
      <!-- 播放暂停按钮，进度条 -->
      <div class="fotTop">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xihuan"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiazai"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-guanzhu"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-huifupingluns"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-gengduo-shuxiang"></use>
        </svg>
      </div>

      <!-- 进度条 -->
      <div class="fotMiddle">
        <van-progress
          :percentage="percenTage"
          stroke-width="4px"
          pivot-text=""
          color="red"
        ></van-progress>
        <!-- <p>{{ percenTage }}</p> -->
      </div>

      <div class="fotBottom">
        <!-- 设置单曲循环或列表循环 -->
        <svg
          class="icon"
          aria-hidden="true"
          @click="playModel"
          v-if="playingModel"
        >
          <use xlink:href="#icon-danquxunhuan"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="playModel" v-else>
          <use xlink:href="#icon-xunhuan"></use>
        </svg>

        <!-- 上一首下一首 -->
        <svg class="icon" aria-hidden="true" @click="changeSong(-1)">
          <use xlink:href="#icon-48shangyishou"></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          @click="turnBtn"
          v-if="flag"
          :style="{ fontSize: '50px' }"
        >
          <use xlink:href="#icon-zanting1"></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          @click="turnBtn"
          v-else
          :style="{ fontSize: '50px' }"
        >
          <use xlink:href="#icon-bofang1"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="changeSong(1)">
          <use xlink:href="#icon-49xiayishou"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-songlist-01"></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
// 该组件需要实现的功能
//  1.歌曲名走马灯效果
//  2.cd转动和磁针转动效果
//  3.同步实现播放和暂停
//  4.点击cd区域实现歌词的切换
//  5.歌词根据对应时间高亮显示(根据audio的属性currentTime实现)
//  6.歌词自动滚动(根据高亮歌词距离盒子的顶部)
//  7.实现上一首下一首的切换
import { mapMutations, mapState } from "vuex";
export default {
  // 需要拿到数据进行渲染
  props: [
    "playingList",
    "turnBtn",
    "flag",
    "changePopup",
    "playingSongData",
    "duration",
  ],

  data() {
    return {
      // 歌词的显示与否
      showLyc: false,
      // 进度条
      percenTage: "",
      // 控制播放模式
      playingModel: false,
    };
  },

  mounted() {
    // console.log(this);
  },

  computed: {
    ...mapState([
      "currentTime",
      "songLyric",
      "whichSong",
      "songsList",
      "playingTimesInval",
    ]),
    // 对歌词数据进行处理
    lyricArr() {
      let lyric = "";
      lyric = this.songLyric.split(/\n/g).map((item) => {
        item = item.replace(/\s*/g, "");
        let min = item.slice(1, 3);
        let sec = item.slice(4, 6);
        let mill = item.slice(7, 10);
        let lrc = item.slice(11, item.length);

        let lyricTime =
          parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);

        if (isNaN(typeof Number(mill))) {
          mill = item.slice(7, 9);
          lrc = item.slice(10, item.length).replace("]", "");
          lyricTime =
            parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
        }

        return { min, sec, mill, lrc, lyricTime };
      });

      //      // 对应时间的歌词高亮显示的时间段，就是当audio运行的时间大于此歌词的开始时间
      //     // 并小于下一次的开始时间，所以需要知道(定义)下一次的开始时间
      lyric.forEach((item, index) => {
        if (index === lyric.length - 1) {
          item.nextTime = 0;
        } else {
          item.nextTime = lyric[index + 1].lyricTime;
        }
      });

      return lyric;
    },
  },

  methods: {
    ...mapMutations(["CHOOSEWHICH", "CHANGE_MODEL", "CHANGE_PLAYING_TIMES"]),
    // 这个事件回调中需要处理两个逻辑，调用父组件的方法，同时将显示歌词改变为显示磁盘
    backhome() {
      this.changePopup();
      setTimeout(() => {
        this.showLyc = false;
      }, 1000);
    },

    // 播放模式,控制audio的loop属性，改变按钮的样式
    playModel() {
      this.playingModel = !this.playingModel;
      this.$store.commit("CHANGE_MODEL");
    },

    // 切换上下首
    changeSong(num) {
      if (this.songsList.length > 1) {
        let which = num + this.whichSong;
        if (which < 0) {
          which = this.songsList.length;
        }
        if (which > this.songsList.length) {
          which = 0;
        }
        this.$store.commit("CHOOSEWHICH", which);
        clearInterval(this.playingTimesInval);
      }
    },
  },

  watch: {
    currentTime(next) {
      next = next.toFixed(2)

      
      // 观察在变化的currentTime属性，根据高亮歌词剧顶部的距离
      let p = document.querySelector("p.active");
      if (p && p.offsetTop > 300) {
        this.$refs.showLycBox.scrollTop = p.offsetTop - 300;
      }
      if(this.duration){
        this.percenTage = parseInt((next / this.duration).toFixed(2) * 100);
      }else{
        this.percenTage = parseInt((next /270792).toFixed(2) * 100);
      } 

     
      

      console.log(next,this.duration,this.percenTage);
      // 列表循环
      if (!this.playingModel) {
        if (this.percenTage >= 100 && this.songsList.length > 1) {
          this.percenTage = 0;
          this.changeSong(1);
          console.log(1);
        }
      }else{
        // 单曲循环
        if(this.percenTage >= 100){
          this.percenTage = 0;
        }
      }
    },
  },
};
</script>

<style scoped>
.footer {
  padding: 15px;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.footer .fotTop,
.footer .fotBottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.songLyric {
  width: 100%;
  height: 11rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.2rem;
  overflow: scroll;
  padding: 0 20px;
  box-sizing: border-box;
}
.songLyric p {
  margin-bottom: 20px;
  color: rgb(73, 70, 70);
}

/* 隐藏滚动条 */
.songLyric::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.top {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  align-items: center;
}
.songLyric {
  text-align: center;
}
.backPic {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  filter: blur(80px);
}
.renderinfo {
  text-align: center;
}
.renderinfo p {
  font-size: 24px;
  color: rgb(180, 102, 102);
}

/* 定义歌词高亮显示 */
.active {
  color: white !important;
  font-size: 26px;
}
.renderinfo span {
  font-size: 14px;
  color: rgb(226, 149, 87);
}

.content {
  width: 100%;
  height: 11rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.needle_pic {
  width: 2.5rem;
  height: 4.5rem;
  position: absolute;
  left: 40%;
  transform-origin: 0 0;
  transform: rotate(-30deg);
  transition: all 2s;
  top: 1.4rem;
}
/* 定义动态class，控制指针样式 */
.needle_pic_active {
  width: 2.5rem;
  height: 4.5rem;
  position: absolute;
  left: 40%;
  transform-origin: 0 0;
  transform: rotate(-12deg);
  transition: all 2s;
  top: 1.4rem;
}
.cd_pic {
  width: 7rem;
  height: 7rem;
  position: absolute;
  bottom: 0.5rem;
  z-index: -1;
}

.cartoonPic {
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 50%;
  position: absolute;
  bottom: 1.9rem;
  /* 将定义好的动画添加进来 */
  animation: cd_route 10s linear infinite;
}

/* 定义动态class*/
.cartoonPic_pic_active {
  /* 这是C3动画中自带的属性，表示开始动画 */
  animation-play-state: running;
}

.cartoonPic_pic_paused {
  /* 暂停动画 */
  animation-play-state: paused;
}

/* 定义cd的动画 */
@keyframes cd_route {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
</style>